<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!--<%@ taglib prefix="c1" uri="http://java.sun.com/jstl/core_rt"%>-->
<html>
<head>
	<base href="${pageContext.request.contextPath}/">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet"/>

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

<script type="text/javascript">

	$(function(){
		//给“创建”按钮添加单击事件
		$("#createClueBtn").click(function(){
			$("#createClueModal").modal("show");
			//重置表单
			$("#createClueForm")[0].reset();
		});

		//给模态窗口的“保存”按钮添加单击事件
		$("#saveCreateClueBtn").click(function (){
			//收集参数
			var fullname =$.trim($("#create-fullname").val());
			var appellation =$.trim($("#create-appellation").val());
			var owner =$.trim($("#create-owner").val());
			var company =$.trim($("#create-company").val());
			var job =$.trim($("#create-job").val());
			var email =$.trim($("#create-email").val());
			var phone =$.trim($("#create-phone").val());
			var website =$.trim($("#create-website").val());
			var mphone =$.trim($("#create-mphone").val());
			var state =$.trim($("#create-state").val());
			var source =$.trim($("#create-source").val());
			var description =$.trim($("#create-description").val());
			var contactSummary =$("#create-contactSummary").val();
			var nextContactTime =$("#create-nextContactTime").val();
			var address =$.trim($("#create-address").val());
			//表单验证
			/*if(!formVerify(owner,company,fullname,email,phone,website,mphone)){
				return;
			}*/
			//发送请求
			$.ajax({
				url:"workbench/clue/saveCreateClue.do",
				data:{
					//你这写的是啥啊
					fullname,appellation, owner, company, job, email, phone, website, mphone, state, source,description, contactSummary, nextContactTime, address
				},
				type:"post",
				dataType:"json",
				success:function(data) {
					if(data.code == "1") {
						//关闭模态窗口
						$("#createClueModal").modal("hide");
						//刷新线索列表，显示第一页数据，保持每页显示条数不变
						queryClueByConditionForPage(1,$("#demo_page1").bs_pagination('getOption','rowsPerPage'));
						alert(111);
					}else {
						alert(data.message);
					}
				}
			});
		});

		//当线索主页面加载完成，查询所有数据的第一页以及所有数据的总条数，默认每页显示10条；
		queryClueByConditionForPage(1,10);
		//给“查询”按钮添加单击事件
		$("#queryClueBtn").click(function (){
			//获取上一次显示列表的pageSize
			queryClueByConditionForPage(1,$("#demo_page1").bs_pagination('getOption','rowsPerPage'));
		});

		//给”全选”按钮添加单击事件
		$("#checkAll").click(function(){
			//实现是否全选
			$("#tBody input[type='checkbox']").prop("checked",this.checked)
		});

		//给所有子checkbox按钮添加单击事件
		$("#tBody").on("click","input[type='checkbox']",function(){
			//全选则把checkAll也选上，否则， 取消
			$("#checkAll").prop("checked",$("#tBody input[type='checkbox']").size() == $("#tBody input[type='checkbox']:checked").size())
		});

		//给“修改”按钮添加单击事件
		$("#editClueBtn").click(function(){
			//获取选中的checkbox
			let checkboxs = $("#tBody input[type='checkbox']:checked");
			if(checkboxs.size() != 1) {
				alert("只能选中一条数据进行修改！！！");
				return;
			}
			//获取参数
			let id = checkboxs[0].value;
			//发送请求
			$.ajax({
				url:"workbench/clue/queryClueById.do",
				data:{id},
				type:"post",
				dataType:"json",
				success:function(data){
					//把线索信息显示在模态窗口上
					$("#edit-id").val(data.id);
					$("#edit-fullname").val(data.fullname);
					$("#edit-appellation").val(data.appellation);
					$("#edit-owner").val(data.owner);
					$("#edit-company").val(data.company);
					$("#edit-job").val(data.job);
					$("#edit-email").val(data.email);
					$("#edit-phone").val(data.phone);
					$("#edit-website").val(data.website);
					$("#edit-mphone").val(data.mphone);
					$("#edit-state").val(data.state);
					$("#edit-source").val(data.source);
					$("#edit-description").val(data.description);
					$("#edit-contactSummary").val(data.contactSummary);
					$("#edit-nextContactTime").val(data.nextContactTime);
					$("#edit-address").val(data.address);
					//显示模态窗口
					$("#editClueModal").modal("show");

				}
			})
		});

		//给模态窗口“更新”按钮添加单击事件
		$("#updateClueById").click(function (){
			//收集参数
			var id = $("#edit-id").val();
			var fullname =$.trim($("#edit-fullname").val());
			var appellation =$.trim($("#edit-appellation").val());
			var owner =$.trim($("#edit-owner").val());
			var company =$.trim($("#edit-company").val());
			var job =$.trim($("#edit-job").val());
			var email =$.trim($("#edit-email").val());
			var phone =$.trim($("#edit-phone").val());
			var website =$.trim($("#edit-website").val());
			var mphone =$.trim($("#edit-mphone").val());
			var state =$.trim($("#edit-state").val());
			var source =$.trim($("#edit-source").val());
			var description =$.trim($("#edit-description").val());
			var contactSummary =$("#edit-contactSummary").val();
			var nextContactTime =$("#edit-nextContactTime").val();
			var address =$.trim($("#edit-address").val());
			//表单验证
			if(!formVerify(owner,company,fullname,email,phone,website,mphone)){
				return;
			}
			//发送请求
			$.ajax({
				url:"workbench/clue/saveEditClueById.do",
				data:{
					id,fullname,appellation,owner,company,job,email,phone,website,mphone,state,source,description,contactSummary,nextContactTime,address
				},
				type:"post",
				dataType:"json",
				success:function(data){
					if(data.code == "1"){
						//关闭模态窗口
						$("#editClueModal").modal("hide");
						//刷新市场活动列表,保持页号和每页显示条数都不变
						queryClueByConditionForPage($("#demo_page1").bs_pagination('getOption','currentPage'),$("#demo_page1").bs_pagination('getOption','rowsPerPage'));
					}else {
						alert(data.message);
					}
				}
			})
		});

		//给“删除"按钮添加单击事件
		$("#deleteClueBtn").click(function(){
			//获取所有选中的checkbox
			let checkboxs = $("#tBody input[type='checkbox']:checked");
			if(checkboxs.size() < 1) {
				alert("最少删除一条数据！！！");
				return;
			}
			if(window.confirm("是否确认删除？")){
				let ids = "";
				//遍历checkboxs,获取id  id=xxx&id=xxx&id=xxx
				$.each(checkboxs,function(){
					ids += "id=" + this.value + "&";
				});
				//id=xxx&id=xxx&id=xxx
				ids = ids.substring(0,ids.length-1);
				//发送请求
				$.ajax({
					url:"workbench/clue/deleteClueByIds.do",
					data:ids,
					type:"post",
					dataType:"json",
					success:function(data){
						if(data.code == "1"){
							//刷新市场活动列表,显示第一页数据,保持每页显示条数不变
							queryClueByConditionForPage(1,$("#demo_page1").bs_pagination('getOption','rowsPerPage'));
						}else {
							alert(data.message);
						}
					}
				});
			}
		});
	});

	//表单验证
	function formVerify(owner,company,fullname,email,phone,website,mphone){
		//验证所有者||公司||姓名都不可为空
		if(owner == "" || company== "" || fullname==""){
			alert("必填项不可为空！！！");
			return 0;
		}
		//验证邮箱
		var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
		if(!regEmail.test(email)) {
			alert("邮箱格式有误！！！");
			return 0;
		}
		//验证公司座机
		var regCompany = /0\d{2,3}-\d{7,8}|\(?0\d{2,3}[)-]?\d{7,8}|\(?0\d{2,3}[)-]*\d{7,8}/;
		if(!regCompany.test(phone)){
			alert("公司座机格式有误！！！");
			return 0;
		}
		//验证公司网站
		var regWeb = /^(https|http|ftp):////[a-zA-Z0-9-.]+.[a-zA-Z]{2,}(:[0-9]{1,5})?(/[S]*)?$/;
		if(!regWeb.test(website)){
			alert("网站格式有误！！！");
			return 0;
		}
		//验证手机号码
		var regPhone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
		if(!regPhone.test(mphone)){
			alert("手机号码格式有误！！！");
			return 0;
		}
		return 1;
	}
	//定义分页查询函数
	function queryClueByConditionForPage(pageNo,pageSize){
		//收集数据
		var fullname = $.trim($("#query-fullname").val());
		var company = $.trim($("#query-company").val());
		var phone = $.trim($("#query-phone").val());
		var source = $.trim($("#query-source option:selected").text()); //获取被选中option的内容
		var owner = $.trim($("#query-owner").val());
		var mphone = $.trim($("#query-mphone").val());
		var state = $.trim($("#query-state option:selected").text());
		//发送请求
		$.ajax({
			url:"workbench/clue/queryClueByConditionForPage.do",
			data:{
				fullname, company, phone, source, owner, mphone, state,pageNo,pageSize
			},
			type:"post",
			dataType:"json",
			success:function(data){
				//遍历clueList，拼接所有数据
				let htmlStr = "";
				$.each(data.clueList,function(index,obj){
					htmlStr+="<tr>";
					htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
					htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/clue/detailClue.do?id="+obj.id+"';\">"+obj.fullname+obj.appellation+"</a></td>";
					htmlStr+="<td>"+obj.company+"</td>";
					htmlStr+="<td>"+obj.phone+"</td>";
					htmlStr+="<td>"+obj.mphone+"</td>";
					htmlStr+="<td>"+obj.source+"</td>";
					htmlStr+="<td>"+obj.owner+"</td>";
					htmlStr+="<td>"+obj.state+"</td>";
					htmlStr+="</tr>";
				});
				$("#tBody").html(htmlStr);
				//每次渲染时，使全选按钮不选中
				$("#checkAll").prop("checked",false);

				//计算总页数
				var totalPages = data.totalRows % pageSize == 0 ? data.totalRows/pageSize:parseInt(data.totalRows/pageSize)+1;

				//bs_pagination翻页插件
				$("#demo_page1").bs_pagination({
					currentPage: pageNo,//当前页号,相当于pageNo
					rowsPerPage: pageSize,//每页显示条数，相当于pageSize
					totalRows: data.totalRows,//总条数
					totalPages: totalPages,//总页数

					visiblePageLinks: 5,//最多可以显示的卡片数

					showGoToPage: true,//是否显示“跳转到”部分，默认true--显示
					showRowsPerPate: true,//是否显示“每页显示条数”部分，默认true--显示
					showRowsInfo: true,//是否显示记录的信息，默认true--显示
					onChangePage:function(event,pageObj){
						queryClueByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
					}
				});
			}
		});
	}
</script>
</head>
<body>

	<!-- 创建线索的模态窗口 -->
	<div class="modal fade" id="createClueModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">创建线索</h4>
				</div>
				<div class="modal-body">
					<form id="createClueForm" class="form-horizontal" role="form">

						<div class="form-group">
							<label for="create-owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-owner">
									<c:forEach items="${userList}" var="user">
										<option value="${user.id}">${user.name}</option>
									</c:forEach>
								</select>
							</div>
							<label for="create-company" class="col-sm-2 control-label">公司<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-company">
							</div>
						</div>

						<div class="form-group">
							<label for="create-appellation" class="col-sm-2 control-label">称呼</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-appellation">
									<c:forEach items="${applicationList}" var="application">
										<option value="${application.id}">${application.value}</option>
									</c:forEach>
								</select>
							</div>
							<label for="create-fullname" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-fullname">
							</div>
						</div>

						<div class="form-group">
							<label for="create-job" class="col-sm-2 control-label">职位</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-job">
							</div>
							<label for="create-email" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-email">
							</div>
						</div>

						<div class="form-group">
							<label for="create-phone" class="col-sm-2 control-label">公司座机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-phone">
							</div>
							<label for="create-website" class="col-sm-2 control-label">公司网站</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-website">
							</div>
						</div>

						<div class="form-group">
							<label for="create-mphone" class="col-sm-2 control-label">手机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-mphone">
							</div>
							<label for="create-state" class="col-sm-2 control-label">线索状态</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-state">
									<c:forEach items="${clueStateList}" var="clueState">
										<option value="${clueState.id}">${clueState.value}</option>
									</c:forEach>
								</select>
							</div>
						</div>

						<div class="form-group">
							<label for="create-source" class="col-sm-2 control-label">线索来源</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-source">
									<c:forEach items="${sourceList}" var="source">
										<option value="${source.id}">${source.value}</option>
									</c:forEach>
								</select>
							</div>
						</div>


						<div class="form-group">
							<label for="create-description" class="col-sm-2 control-label">线索描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>

						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

						<div style="position: relative;top: 15px;">
							<div class="form-group">
								<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
								<div class="col-sm-10" style="width: 81%;">
									<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="date" class="form-control" id="create-nextContactTime">
								</div>
							</div>
						</div>

						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

						<div style="position: relative;top: 20px;">
							<div class="form-group">
                                <label for="create-address" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="create-address"></textarea>
                                </div>
							</div>
						</div>
					</form>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveCreateClueBtn">保存</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 修改线索的模态窗口 -->
	<div class="modal fade" id="editClueModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">修改线索</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<input type="hidden" id="edit-id">
						<div class="form-group">
							<label for="edit-owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-owner">
									<c:forEach items="${userList}" var="user">
										<option value="${user.id}">${user.name}</option>
									</c:forEach>
								</select>
							</div>
							<label for="edit-company" class="col-sm-2 control-label">公司<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-company" value="动力节点">
							</div>
						</div>

						<div class="form-group">
							<label for="edit-appellation" class="col-sm-2 control-label">称呼</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-appellation">
									<c:forEach items="${applicationList}" var="application">
										<option value="${application.id}">${application.value}</option>
									</c:forEach>
								</select>
							</div>
							<label for="edit-fullname" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-fullname" value="李四">
							</div>
						</div>

						<div class="form-group">
							<label for="edit-job" class="col-sm-2 control-label">职位</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-job" value="CTO">
							</div>
							<label for="edit-email" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-email" value="lisi@bjpowernode.com">
							</div>
						</div>

						<div class="form-group">
							<label for="edit-phone" class="col-sm-2 control-label">公司座机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-phone" value="010-84846003">
							</div>
							<label for="edit-website" class="col-sm-2 control-label">公司网站</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-website" value="http://www.bjpowernode.com">
							</div>
						</div>

						<div class="form-group">
							<label for="edit-mphone" class="col-sm-2 control-label">手机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-mphone" value="12345678901">
							</div>
							<label for="edit-state" class="col-sm-2 control-label">线索状态</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-state">
									<c:forEach items="${clueStateList}" var="clueState">
										<option value="${clueState.id}">${clueState.value}</option>
									</c:forEach>
								</select>
							</div>
						</div>

						<div class="form-group">
							<label for="edit-source" class="col-sm-2 control-label">线索来源</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-source">
									<c:forEach items="${sourceList}" var="source">
										<option value="${source.id}">${source.value}</option>
									</c:forEach>
								</select>
							</div>
						</div>

						<div class="form-group">
							<label for="edit-description" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-description">这是一条线索的描述信息</textarea>
							</div>
						</div>

						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

						<div style="position: relative;top: 15px;">
							<div class="form-group">
								<label for="edit-contactSummary" class="col-sm-2 control-label">联系纪要</label>
								<div class="col-sm-10" style="width: 81%;">
									<textarea class="form-control" rows="3" id="edit-contactSummary">这个线索即将被转换</textarea>
								</div>
							</div>
							<div class="form-group">
								<label for="edit-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control" id="edit-nextContactTime" value="2017-05-01">
								</div>
							</div>
						</div>

						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                        <div style="position: relative;top: 20px;">
                            <div class="form-group">
                                <label for="edit-address" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="edit-address">北京大兴区大族企业湾</textarea>
                                </div>
                            </div>
                        </div>
					</form>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateClueById">更新</button>
				</div>
			</div>
		</div>
	</div>




	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>线索列表</h3>
			</div>
		</div>
	</div>

	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">

			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="query-fullname">
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">公司</div>
				      <input class="form-control" type="text" id="query-company">
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">公司座机</div>
				      <input class="form-control" type="text" id="query-phone">
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">线索来源</div>
					  <select class="form-control" id="query-source">
					  	  <option></option>
					  	  <c:forEach items="${sourceList}" var="source">
							  <option value="${source.id}">${source.value}</option>
						  </c:forEach>
					  </select>
				    </div>
				  </div>

				  <br>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="query-owner">
				    </div>
				  </div>



				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">手机</div>
				      <input class="form-control" type="text" id="query-mphone">
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">线索状态</div>
					  <select class="form-control" id="query-state">
					  	<option></option>
						  <c:forEach items="${clueStateList}" var="clueState">
							  <option value="${clueState.id}">${clueState.value}</option>
						  </c:forEach>
					  </select>
				    </div>
				  </div>

				  <button type="button" class="btn btn-default" id="queryClueBtn">查询</button>

				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 40px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="createClueBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="editClueBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteClueBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>


			</div>
			<div style="position: relative;top: 50px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="checkAll" /></td>
							<td>名称</td>
							<td>公司</td>
							<td>公司座机</td>
							<td>手机</td>
							<td>线索来源</td>
							<td>所有者</td>
							<td>线索状态</td>
						</tr>
					</thead>
					<tbody id="tBody">

					</tbody>
				</table>
				<div class="col-md-12" id="demo_page1"></div>
			</div>
		</div>

	</div>
</body>
</html>
